<template>
    <div class="content flex-col">
        <div class="tenant-header flex-row">
            <div class="tenant-header-left flex-row">

                <CgsButton style="width: 120px"
                           @click="handleAdd"
                >
                    <span class="button-icon add"></span>
                    新增
                </CgsButton>
                <CgsButton style="width: 150px"
                           @click="handleAddMoreMap"
                >
                    <span class="button-icon add"></span>
                    添加更多地图
                </CgsButton>
                <CgsButton style="width: 120px"
                           @click="handleDrawMap"
                >
                    <span class="button-icon earth"></span>
                    画地图
                </CgsButton>
            </div>
        </div>
        <div class="tenant-content tenant-table">
            <el-table
                    :data="tableData"
                    row-class-name="category-table-tr"
                    :header-cell-style="headerStyle"
                    style="width: 100%">
                <el-table-column
                        prop="name"
                        label="地图名称：">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-edit"
                                   @click="handleUpdate(scope.row)"
                                   type="text">编辑</el-button>
                        <el-button icon="el-icon-delete"
                                   @click="handleDelete(scope.row)"
                                   type="text" style="color: #E4E4E4">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="content_floor">
            <CgsPagination
                    :total="page.total"
                    :page-size="page.size"
                    :current-page="page.current"
                    @page-size-change="pageSizeChange"
                    @page-change="pageChange"
            />
        </div>

        <el-dialog :title="submitState === 'add'? '一 新增 一': '一 修改 一'"
                   :visible.sync="dialogVisible"
                   center>
            <el-form label-position="left" label-width="120px"
                     :model="form"
                     :rules="formRules" ref="formRules"
            >
                <el-form-item label="地图名称：" prop="name">
                    <el-input v-model="form.name"
                              placeholder="请输入场景名称"/>
                </el-form-item>
                <el-form-item label="地图数据：" prop="data">
                    <el-input v-model="form.data"
                              rows="4"
                              type="textarea"
                    ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="formSubmit('formRules')">确 定</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import { getList, getObj, addObj, delObj, updateObj } from '@/api/map'
    import CgsButton from "../components/CgsButton";
    import CgsPagination from "../components/CgsPagination";
    export default {
        name: "map",
        data() {
            return {
                dialogVisible: false,
                headerStyle: {
                    background: "rgba(49,63,82,0.5) !important"
                },
                submitState: 'add',
                page: {
                    total: 200,
                    size: 10,
                    current: 1
                },
                form: {
                    name: '',
                    data: ""
                },
                formLabelWidth: '120px',
                formRules: {
                    name: [
                        { required: true, message: '请输入地图名称', trigger: 'blur' },
                        { min: 2, message: '长度大于 2 个字符', trigger: 'blur' }
                    ],
                },
                tableData: []
            }
        },
        methods:{
            getList() {
                let {page: {size, current}} = this
                getList({
                    current,
                    size
                }).then(res => {
                    const data = res.data.data;
                    this.page.total = data.total;
                    this.page.size = data.size;
                    this.tableData = data.records;
                })
            },
            pageSizeChange(value) {
                this.page.size = value;
                this.getList();
            },
            pageChange(value) {
                this.page.current = value;
                this.getList();
            },
            formSubmit(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.dialogVisible = false;
                        if (this.submitState === "add") {
                            try {
                                JSON.parse(this.form.data)
                                addObj(this.form).then(() => {
                                    this.$message.success('新增成功');
                                    this.getList()
                                })
                            } catch (e) {
                                this.$message.warning('地图数据格式错误，要求json格式。');
                            }
                        }
                        else if (this.submitState === "update") {
                            try {
                                JSON.parse(this.form.data)
                                updateObj(this.form).then(() => {
                                    this.$message.success('修改成功');
                                    this.getList()
                                })
                            } catch (e) {
                                this.$message.warning('地图数据格式错误，要求json格式。');
                            }
                        }
                    } else {
                        return false;
                    }
                });
            },
            handleAdd() {
                this.form.name = "";
                this.form.data = "";

                this.submitState = "add";
                this.dialogVisible = true;
            },
            handleAddMoreMap() {
                window.open('https://datav.aliyun.com/tools/atlas/#&lat=33.521903996156105&lng=104.29849999999999&zoom=4')
            },
            handleDrawMap() {
                window.open('https://geojson.io/#map')
            },
            handleUpdate(row) {
                this.form = {...row};
                this.dialogVisible = true
                this.submitState = "update";
            },
            handleDelete(row) {
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delObj(row.id).then(() => {
                        this.$message.success('删除成功');
                        this.getList()
                    })
                })
            },
        },
        components: {
            CgsButton,
            CgsPagination
        },
        created() {
            this.getList();
        }
    }
</script>

<style scoped>

</style>
